<template>
  <Card title="设计流程">
    <Draggable
      class="draggable"
      :list="list"
      v-bind="dragOptions"
      group="draggable"
    >
      <div v-for="(item, index) in list" :key="item.id" class="inner">
        <el-popover placement="right" width="400" trigger="click">
          <el-button type="success" class="btn" slot="reference">
            {{ item.label }}
          </el-button>
          <el-form size="small" label-width="100px" v-if="item.id === 0">
            <el-form-item label="服务名称">
              <el-input v-model="formA.valA"></el-input>
            </el-form-item>
            <el-form-item label="服务数量">
              <el-input v-model="formA.valB"></el-input>
            </el-form-item>
            <el-form-item label="端口">
              <el-input v-model="formA.valC"></el-input>
            </el-form-item>
            <el-form-item label="参数">
              <el-input
                v-model="formA.valD"
                type="textarea"
                rows="2"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form size="small" label-width="100px" v-if="item.id === 1">
            <el-form-item label="服务名称">
              <el-input v-model="formB.valA"></el-input>
            </el-form-item>
            <el-form-item label="服务数量">
              <el-input v-model="formB.valB"></el-input>
            </el-form-item>
            <el-form-item label="端口">
              <el-input v-model="formB.valC"></el-input>
            </el-form-item>
            <el-form-item label="参数">
              <el-input
                v-model="formB.valD"
                type="textarea"
                rows="2"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form size="small" label-width="100px" v-if="item.id === 2">
            <el-form-item label="服务名称">
              <el-input v-model="formC.valA"></el-input>
            </el-form-item>
            <el-form-item label="服务数量">
              <el-input v-model="formC.valB"></el-input>
            </el-form-item>
            <el-form-item label="端口">
              <el-input v-model="formC.valC"></el-input>
            </el-form-item>
            <el-form-item label="参数">
              <el-input
                v-model="formC.valD"
                type="textarea"
                rows="2"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form size="small" label-width="100px" v-if="item.id === 3">
            <el-form-item label="服务名称">
              <el-input v-model="formD.valA"></el-input>
            </el-form-item>
            <el-form-item label="服务数量">
              <el-input v-model="formD.valB"></el-input>
            </el-form-item>
            <el-form-item label="端口">
              <el-input v-model="formD.valC"></el-input>
            </el-form-item>
            <el-form-item label="参数">
              <el-input
                v-model="formD.valD"
                type="textarea"
                rows="2"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-popover>
        <i class="el-icon-right" v-if="index !== list.length - 1"></i>
      </div>
    </Draggable>
  </Card>
</template>

<script>
import Draggable from 'vuedraggable'
import Card from '@/components/Card'
export default {
  components: {
    Card,
    Draggable
  },

  data() {
    return {
      list: [
        { id: 0, label: 'abs-server-api' },
        { id: 1, label: 'bboss-product-api' },
        { id: 2, label: 'bboss-server-config' },
        { id: 3, label: 'statge-server-web' }
      ],
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formC: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formD: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      }
    }
  },

  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.draggable {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .btn {
    padding: 20px 40px;
  }
  i {
    font-size: 22px;
    margin-left: 1.5vw;
  }
}
</style>
